<template>
  <div class="filter_data">
    <div class="select">筛选</div>
    <div class="searchline">
      <div class="">名称：</div>

      <el-input
        v-model="filterData.technologyTemplateName"
        class="inputValue"
        clearable
        size="mini"
        placeholder="请输入名称"
        style="width: 90%"
      />
    </div>
    <div class="searchline">
      <div class="">版次：</div>
      <el-input
        v-model="filterData.version"
        class="inputValue"
        clearable
        size="mini"
        placeholder="请输入版次"
        style="width: 90%"
      />
    </div>
    <div class="searchline">
      <div style="margin-bottom: 8px">负责人：</div>
      <el-select
        v-model="filterData.author"
        size="small"
        value-key=""
        placeholder="请选择"
        clearable
        filterable
        style="width: 90%"
      >
        <el-option
          v-for="item in userList"
          :key="item.username"
          :label="item.username"
          :value="item.username"
        />
      </el-select>
    </div>

    <div class="searchline">
      <div class="">日期：</div>
      <div class="inputValue">
        <!-- value-format="yyyy-MM-dd" -->
        <el-date-picker
          v-model="filterData.startDate"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          size="mini"
          style="width: 43%"
          placeholder="开始日期"
        />
        <i class="el-icon-right" style="color: rgba(0, 0, 0, 0.25)" />
        <el-date-picker
          v-model="filterData.endDate"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          size="mini"
          style="width: 43%"
          placeholder="结束日期"
        />
      </div>
    </div>

    <div class="bottomBtn">
      <el-button class="reset" size="mini" style="width: 50%" @click="reSet"
        >重置</el-button
      >
      <el-button
        class="submit"
        size="mini"
        style="width: 50%"
        type="primary"
        @click="submitForm"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script>
import { getTemplate } from "@/api/technology";
import _ from "lodash";
export default {
  props: {
    userList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableData: [],
      filterData: {
        version: "",
        author: "",
        technologyTemplateName: "",
        startDate: "",
        endDate: ""
      }
    };
  },
  mounted() {
    this.getTemplate();
  },
  methods: {
    getTemplate() {
      getTemplate({
        page: 1,
        pageSize: 0
      })
        .then(r => {
          const { data } = r;

          this.tableData = _.uniqBy(data.results, "author");
        })
        .finally(f => {});
    },

    // 重置
    reSet() {
      this.filterData = {
        version: "",
        author: "",
        technologyTemplateName: "",
        startDate: "",
        endDate: ""
      };
      this.$emit("setFilterList");
    },
    submitForm() {
      if (
        this.filterData.version ||
        this.filterData.author ||
        this.filterData.technologyTemplateName ||
        this.filterData.startDate ||
        this.filterData.endDate
      ) {
        this.$emit("setFilterList", this.filterData);
      } else {
        this.$emit("setFilterList");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.filter_data {
  width: 25%;
}
</style>
